<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <script src="//cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js" charset="utf-8"></script>
</head>

<body>
    <div style="padding: 15px;margin: 15px;background-color: #fff;">
        <!-- 搜索表单 -->
        <div class="layui-form" style="border-bottom:1px solid #f6f6f6">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="cat">
                            <option value=""></option>
                            {foreach $cates as $cate}
                            <option value="{$cate['id']}">{$cate['name']|raw}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">热门</label>
                    <div class="layui-input-inline">
                        <select name="hot">
                            <option value=""></option>
                            <option value="1">开</option>
                            <option value="0">关</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value=""></option>
                            <option value="0">启用</option>
                            <option value="1">禁用</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" lay-submit lay-filter="search" class="layui-btn"><i
                            class="layui-icon layui-icon-search"></i></button>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="layui-table" lay-filter="dataTable"
            lay-data="{'url':'/admins/article/index', where:{search: ''}, id: 'dataTable', toolbar: '#toolbar', page:true}">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true, fixed: 'left'}"></th>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'title'}">标题</th>
                    <th lay-data="{field:'preview', sort: true}">缩略图</th>
                    <th lay-data="{field:'cat_name'}">分类</th>
                    <th lay-data="{field:'views', edit: 'text', sort: true}">阅读</th>
                    <th lay-data="{field:'hot', sort: true, templet:'#hotTpl', width: 80}">热门</th>
                    <th lay-data="{field:'status', sort: true, templet:'#statusTpl', width: 95}">状态</th>
                    <th lay-data="{field:'date'}">日期</th>
                    <th lay-data="{width:170, align:'center', toolbar: '#databar'}">操作</th>
                </tr>
            </thead>
        </table>

        <!-- 头工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i></button>
            </div>
        </script>

        <!-- 行工具 -->
        <script type="text/html" id="databar">
            <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">详情</a>
        </script>

        <!-- 单元格热门开关 -->
        <script type="text/html" id="hotTpl">
            <input type="checkbox" name="hot" lay-filter="hot" value="{{d.id}}" lay-skin="switch" lay-text="开|关" {{# if(d.hot == 1){ }} checked{{# } }}>
        </script>

        <!-- 单元格状态开关 -->
        <script type="text/html" id="statusTpl">
            <input type="checkbox" name="status" lay-filter="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{# if(d.status == 0){ }} checked{{# } }}>
        </script>

    </div>

    <!-- js -->
    <script>
        layui.use(['table', 'form', 'upload', 'util'], function () {
            var table = layui.table,
                upload = layui.upload,
                form = layui.form,
                util = layui.util,
                $ = layui.jquery;

            // 获取应用、控制器和方法
            var module = '{:app("http")->getName()}'
                , controller = '{$Request.controller}'
                , action = '{$Request.action}';

            // 头工具栏事件
            table.on('toolbar(dataTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;

                // 头工具栏批量删除
                if (obj.event === 'delAll') {
                    if (data.length === 0) {
                        return layer.msg('请选择数据');
                    }
                    layer.confirm('确定删除吗？', { icon: 3 }, function (index) {
                        var ids = [];
                        data.forEach(elem => { ids.push(elem.id); });
                        $.post('/' + module + '/' + controller + '/del', { id: ids }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            layer.msg(res.msg);
                            table.reload(obj.config.id);
                        }, 'json');
                    });
                }

                // 头工具栏添加
                if (obj.event === 'add') {
                    var addIndex = layer.open({
                        type: 2,
                        title: '添加',
                        shadeClose: false,
                        maxmin: true,
                        area: ['480px', '450px'],
                        content: '/' + module + '/' + controller + '/add',
                    });
                    layer.full(addIndex);
                }

                // 头工具栏刷新
                if (obj.event === 'refresh') {
                    table.reload(obj.config.id);
                }

            });

            // 监听行工具事件
            table.on('tool(dataTable)', function (obj) {
                var data = obj.data;

                // 行工具删除行
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么？', { icon: 3 }, function (index) {
                        layer.close(index);
                        $.post('/' + module + '/' + controller + '/del', { id: data.id }, function (res) {
                            if (res.code) return layer.msg(res.msg, { icon: 2 });
                            obj.del();
                            layer.msg(res.msg);
                        }, 'json');
                    });
                }

                // 行工具编辑
                if (obj.event === 'edit') {
                    var editIndex = layer.open({
                        type: 2,//1 dom或文本，2 iframe,3 加载层,4 tips
                        title: '编辑',
                        shadeClose: false,
                        maxmin: true,
                        area: ['480px', '450px'],
                        content: '/' + module + '/' + controller + '/edit?id=' + data.id,
                    });
                    layer.full(editIndex);
                }

                // 行工具详情页
                if (obj.event === 'detail') {
                    window.open('/detail/' + data.id + '.html', '_blank');
                }

            });

            // 监听单元格编辑
            table.on('edit(dataTable)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                $.post('/' + module + '/' + controller + '/modify', { id: data.id, field: field, value: util.escape(value) }, function (res) {
                    if (res.code) {
                        layer.msg(res.msg);
                        table.reload('dataTable');
                        return;
                    }
                    layer.msg(res.msg, { icon: 1 });
                }, 'json');
            });

            // 监听单元格热门开关事件
            form.on('switch(hot)', function (obj) {
                $.post('/' + module + '/' + controller + '/modify', { id: this.value, field: 'hot', value: obj.elem.checked ? 1 : 0 }, function (res) {
                    if (res.code) {
                        layer.msg(res.msg);
                        table.reload('dataTable');
                        return;
                    }
                    layer.msg(res.msg, { icon: 1 });
                }, 'json');
            });

            // 监听单元格状态开关事件
            form.on('switch(status)', function (obj) {
                $.post('/' + module + '/' + controller + '/modify', { id: this.value, field: 'status', value: obj.elem.checked ? 0 : 1 }, function (res) {
                    if (res.code) {
                        layer.msg(res.msg);
                        table.reload('dataTable');
                        return;
                    }
                    layer.msg(res.msg, { icon: 1 });
                }, 'json');
            });

            // 监听表单搜索框事件
            form.on('submit(search)', function (obj) {
                var field = obj.field;
                // 数据表格重载
                table.reload('dataTable', { where: { search: field } });
                return false;
            });

        });
    </script>

</body>

</html>